<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Progress | Semantic UI</title>

<meta name="description" content="A progress bar shows the progression of a task" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="progress" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="active item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Progress
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="active item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/progress.less" />
<script src="/javascript/progress.js"></script>



<div class="ui masthead vertical tab segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Progress
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A progress bar shows the progression of a task
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/progress.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Progress] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Progress should do this%0A%0A**Result**%0AThe Progress does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->
      
      
      <div class="ui floating dropdown theme basic button" data-element="progress" data-type="module">
        <span class="text">4 Themes</span>
        <div class="menu transition hidden">
          
            <div class="item" data-value="Default" data-text="Default Theme">Default</div>
          
            <div class="item" data-value="Classic" data-text="Classic Theme">Classic</div>
          
            <div class="item" data-value="Basic" data-text="Basic Theme">Basic</div>
          
            <div class="item" data-value="Striped" data-text="Striped Theme">Striped</div>
          
        </div>
      </div>
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Progress</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Progress/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Progress/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-progress">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-progress">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Progress.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
    
    
    
    
      
        
      
        
      
        
      
        
      
      <div class="ui four item stackable tabs menu">
        
          <a class="active item" data-tab="definition">Definition</a>
          
        
          <a class="item" data-tab="examples">Examples</a>
          
        
          <a class="item" data-tab="usage">Usage</a>
          
        
          <a class="item" data-tab="settings">Settings</a>
          
        
      </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <div class="ui definition tab" data-tab="definition">

    <h2 class="ui dividing header">Types</h2>

    <div class="example">
      <h4 class="ui header">Standard</h4>
      <p>A standard progress bar</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Uploading Files</div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>
    <div class="indicating example">
      <h4 class="ui header">Indicating</h4>
      <p>An indicating progress bar visually indicates the current level of progress of a task</p>
      <div class="ui indicating progress">
        <div class="bar"></div>
        <div class="label">Funding</div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Content</h2>

    <div class="example">
      <h4 class="ui header">Bar</h4>
      <p>A progress element can contain a bar visually indicating progress</p>
      <div class="ui progress">
        <div class="bar"></div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Progress</h4>
      <p>A progress bar can contain a text value indicating current progress</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Label</h4>
      <p>A progress element can contain a label</p>
      <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Uploading Files</div>
      </div>
    </div>

    <h2 class="ui dividing header">States</h2>

    <div class="example">
      <h4 class="ui header">Active</h4>
      <p>A progress bar can show activity</p>
      <div class="ui active progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Uploading Files</div>
      </div>
    </div>


    <div class="example">
    <h4 class="ui header">Success</h4>
    <p>A progress bar can show a success state</p>
      <div class="ui progress success">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Everything worked, your file is all ready.</div>
      </div>
    </div>

    <div class="example">
    <h4 class="ui header">Warning</h4>
    <p>A progress bar can show a warning state</p>
      <div class="ui progress warning">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">Your file didn't meet the minimum resolution requirements.</div>
      </div>
    </div>

    <div class="example">
    <h4 class="ui header">Error</h4>
    <p>A progress bar can show an error state</p>
      <div class="ui progress error">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">There was an error.</div>
      </div>
    </div>

    <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A progress bar can be disabled</p>
      <div class="ui disabled progress">
        <div class="bar"></div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="example">
      <h4 class="ui header">Inverted</h4>
      <p>A progress bar can have its colors inverted</p>
      <div class="ui inverted segment">
        <div class="ui inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Uploading Files</div>
        </div>
        <div class="ui inverted progress success">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Success</div>
        </div>
        <div class="ui inverted progress warning">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Warning</div>
        </div>
        <div class="ui inverted progress error">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Error</div>
        </div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Attached</h4>
      <p>A progress bar can show progress of an element</p>
      <div class="ui segment">
        <div class="ui top attached progress">
          <div class="bar"></div>
        </div>
        <p>La la la la</p>
        <div class="ui bottom attached progress">
          <div class="bar"></div>
        </div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>

    <div class="another example">
      <div class="ui card">
        <div class="image">
          <img src="/images/wireframe/image.png">
        </div>
        <div class="content">
          <a class="header">Project</a>
          <div class="meta">
            <span class="date">Started in 2014</span>
          </div>
        </div>
        <div class="extra content">
          <a>
            <i class="user icon"></i>
            22 Friends
          </a>
        </div>
        <div class="ui bottom attached progress">
          <div class="bar"></div>
        </div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Size</h4>
      <p>A progress bar can vary in size</p>
      <div class="ui ignored info message">
        Some small sizes may not be able to fit an inlined label
      </div>
      <div class="ui tiny progress">
        <div class="bar"></div>
        <div class="label">Tiny</div>
      </div>
      <div class="ui small progress">
        <div class="bar"></div>
        <div class="label">Small</div>
      </div>
      <div class="ui progress">
        <div class="bar"></div>
        <div class="label">Standard</div>
      </div>
      <div class="ui large progress">
        <div class="bar"></div>
        <div class="label">Large</div>
      </div>
      <div class="ui big progress">
        <div class="bar"></div>
        <div class="label">Big</div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Color</h4>
      <p>Can have different colors:</p>
      <div class="ui red progress">
        <div class="bar"></div>
      </div>
      <div class="ui orange progress">
        <div class="bar"></div>
      </div>
      <div class="ui yellow progress">
        <div class="bar"></div>
      </div>
      <div class="ui olive progress">
        <div class="bar"></div>
      </div>
      <div class="ui green progress">
        <div class="bar"></div>
      </div>
      <div class="ui teal progress">
        <div class="bar"></div>
      </div>
      <div class="ui blue progress">
        <div class="bar"></div>
      </div>
      <div class="ui violet progress">
        <div class="bar"></div>
      </div>
      <div class="ui purple progress">
        <div class="bar"></div>
      </div>
      <div class="ui pink progress">
        <div class="bar"></div>
      </div>
      <div class="ui brown progress">
        <div class="bar"></div>
      </div>
      <div class="ui grey progress">
        <div class="bar"></div>
      </div>
      <div class="ui black progress">
        <div class="bar"></div>
      </div>
      <div class="ignored">
        <div class="ui icon buttons">
          <div class="decrement ui basic red button icon"><i class="minus icon"></i></div>
          <div class="increment ui basic green button icon"><i class="plus icon"></i></div>
        </div>
      </div>
    </div>
    <div class="example">
      <h4 class="ui header">Inverted Color</h4>
      <p>These colors can also be inverted for improved contrast on dark backgrounds</p>
      <div class="ui inverted segment">
        <div class="ui red inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui orange inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui yellow inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui olive inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui green inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui teal inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui blue inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui violet inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui purple inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui pink inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui brown inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui grey inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ui black inverted progress">
          <div class="bar">
            <div class="progress"></div>
          </div>
        </div>
        <div class="ignored">
          <div class="ui icon buttons">
            <div class="decrement ui basic inverted red button icon"><i class="minus icon"></i></div>
            <div class="increment ui basic inverted green button icon"><i class="plus icon"></i></div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">

    <h2 class="ui header">Initializing a progress bar</h2>

    <div class="example">
      <h4 class="ui header">With metadata</h4>
      <p>A progress bar can be initialized with metadata</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example1').progress();
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" data-percent="74" id="example1">
          <div class="bar"></div>
          <div class="label">74% Funded</div>
        </div>
      </div>
    </div>
    <div class="example">
      <h4 class="ui header">With Javascript</h4>
      <p>A progress bar can be initialized with a Javascript settings object</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example2').progress({
          percent: 22
        });
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" id="example2">
          <div class="bar"></div>
          <div class="label">22% Earned</div>
        </div>
      </div>
    </div>

    <h2 class="ui header">Task Completion Percent</h2>

    <div class="example">
      <h4 class="ui header">Adding a Total Value</h4>
      <p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
      <p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example3')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui teal progress" id="example3">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Adding Photos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example3')
          .progress({
            total: 3
          })
        ;
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Initializing with Metadata</h4>
      <p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
      <p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
      <p>In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example4')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui indicating progress" data-value="1" data-total="20" id="example4">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Adding Photos</div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Adding Custom Labels</h4>
      <p>You can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state</p>
      <p>You can use <code>label</code> setting to change progress bar labels between two preset messages. In addition you can customize the messages themselves by specifying the templated text in <code>text</code>. Templated strings will replace three values on render</p>
      <table class="ui basic celled definition table">
        <tr>
          <td>{percent}</td>
          <td>Current percentage</td>
        </tr>
        <tr>
          <td>{value}</td>
          <td>Current value</td>
        </tr>
        <tr>
          <td>{total}</td>
          <td>Total value</td>
        </tr>
        <tr>
          <td>{left}</td>
          <td>Distance to total, or % progress left</td>
        </tr>
      </table>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example5')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui indicating progress" data-value="1" data-total="20" id="example5">
          <div class="bar"></div>
          <div class="label">Adding Photos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example5')
          .progress({
            text: {
              active  : 'Adding {value} of {total} photos',
              success : '{total} Photos Uploaded!'
            }
          })
        ;
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Translation</h4>
      <p>You can also adjust text labels to help strings appear translated</p>
      <div class="code" data-type="javascript" data-demo="true">
        $('#example6')
          .progress('increment')
        ;
      </div>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui progress" data-value="15" data-total="20" id="example6">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Carga de archivos</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('#example6')
          .progress({
            label: 'ratio',
            text: {
              ratio: '{value} de {total}'
            }
          })
        ;
      </div>
    </div>


    <h2 class="ui dividing header">Behavior</h2>

    <p>All the following behaviors can be called using the syntax:</p>
    <div class="code">
    $('.your.element')
      .progress('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition celled sortable table segment">
      <thead>
        <th>Behavior</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>set percent(percent)</td>
          <td>Sets current percent of progress to value. If using a total will convert from percent to estimated value.</td>
        </tr>
        <tr>
          <td>set progress(value)</td>
          <td>Sets progress to specified value. Will automatically calculate percent from total.</td>
        </tr>
        <tr>
          <td>increment(incrementValue)</td>
          <td>Increments progress by increment value, if not passed a value will use random amount specified in settings</td>
        </tr>
        <tr>
          <td>decrement(decrementValue)</td>
          <td>Decrements progress by decrement value, if not passed a value will use random amount specified in settings</td>
        </tr>
        <tr>
          <td>update progress(value)</td>
          <td>Immediately updates progress to value, ignoring progress animation interval delays</td>
        </tr>
        <tr>
          <td>complete</td>
          <td>Finishes progress and sets loaded to 100%</td>
        </tr>
        <tr>
          <td>reset</td>
          <td>Resets progress to zero</td>
        </tr>
        <tr>
          <td>set total(total)</td>
          <td>Set total to a new value</td>
        </tr>
        <tr>
          <td>get text(text)</td>
          <td>Replaces templated string with value, total, percent left and percent.</td>
        </tr>
        <tr>
          <td>get normalized value(value)</td>
          <td>Returns normalized value inside acceptable range specified by total.</td>
        </tr>
        <tr>
          <td>get percent</td>
          <td>Returns percent as last specified</td>
        </tr>
        <tr>
          <td>get value</td>
          <td>Returns current progress value</td>
        </tr>
        <tr>
          <td>get total</td>
          <td>Returns total</td>
        </tr>
        <tr>
          <td>is complete</td>
          <td>Returns whether progress is completed</td>
        </tr>
        <tr>
          <td>is success</td>
          <td>Returns whether progress was a success</td>
        </tr>
        <tr>
          <td>is warning</td>
          <td>Returns whether progress is in warning state</td>
        </tr>
        <tr>
          <td>is error</td>
          <td>Returns whether progress is in error state</td>
        </tr>
        <tr>
          <td>is active</td>
          <td>Returns whether progress is in active state</td>
        </tr>
        <tr>
          <td>set active</td>
          <td>Sets progress to active state</td>
        </tr>
        <tr>
          <td>set warning</td>
          <td>Sets progress to warning state</td>
        </tr>
        <tr>
          <td>set success</td>
          <td>Sets progress to success state</td>
        </tr>
        <tr>
          <td>set error</td>
          <td>Sets progress to error state</td>
        </tr>
        <tr>
          <td>set duration(value)</td>
          <td>Changes progress animation speed</td>
        </tr>
        <tr>
          <td>set label(text)</td>
          <td>Sets progress exterior label to text</td>
        </tr>
        <tr>
          <td>set bar label(text)</td>
          <td>Sets progress bar label to text</td>
        </tr>
        <tr>
          <td>remove active</td>
          <td>Removes progress to active state</td>
        </tr>
        <tr>
          <td>remove warning</td>
          <td>Removes progress to warning state</td>
        </tr>
        <tr>
          <td>remove success</td>
          <td>Removes progress to success state</td>
        </tr>
        <tr>
          <td>remove error</td>
          <td>Removes progress to error state</td>
        </tr>
      </tbody>
    </table>


  </div>
  <div class="ui examples tab" data-tab="examples">

    <h2 class="ui dividing header">Examples</h2>

    <div class="rapid example">
      <h4 class="ui header">Frequently Updated Progress</h4>
      <p>Progress bar will automatically poll for the last progress value after completing an animation, so that animation easing continues to work smoothly, even if update events occur much more frequently than UI updates.</p>
      <a class="ui button" data-url="/images/large-pdf.pdf">
        Rapidly Update
      </a>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui indicating progress" data-value="1" data-total="200" id="example5">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="label">Waiting for you to press button</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript">
        $('.rapid.example .ui.button')
          .on('click', function() {
            var
              $progress       = $('.rapid.example .ui.progress'),
              $button         = $(this),
              updateEvent
            ;
            // restart to zero
            clearInterval(window.fakeProgress)
            $progress.progress('reset');

            // updates every 10ms until complete
            window.fakeProgress = setInterval(function() {
              $progress.progress('increment');
              $button.text( $progress.progress('get value') );
              // stop incrementing when complete
              if($progress.progress('is complete')) {
                clearInterval(window.fakeProgress)
              }
            }, 10);
          })
        ;
        $('.rapid.example .ui.progress')
          .progress({
            duration : 200,
            total    : 200,
            text     : {
              active: '{value} of {total} done'
            }
          })
        ;
      </div>
    </div>
<!--     <div class="upload example">
      <h4 class="ui header">File Upload</h4>
      <p>Progress can be used to display the progress of a file upload event</p>
      <a class="ui button" data-url="/images/large-pdf.pdf">
        Load PDF
      </a>
      <div class="code" data-type="html" data-preview="true">
        <div class="ui indicating progress" data-value="1" data-total="20" id="example5">
          <div class="bar"></div>
          <div class="label">Uploading File</div>
        </div>
      </div>
      <div class="evaluated code" data-type="javascript" data-demo="true">
        $('.upload.example .ui.button')
          .api({
            debug: true,
            dataType: 'text',
            onSuccess: function() {
              console.log('Completed downloading');
            },
            onError: function(error) {
              console.log(error);
            },
            onDownloadProgress: function(progress) {
              console.log('progress', progress);
            }
          })
        ;
        $('.upload.example .ui.progress')
          .progress()
        ;
      </div>
    </div> -->

  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Progress Settings
      <div class="sub header">Form settings modify the tab behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>autoSuccess</td>
          <td>true</td>
          <td>Whether success state should automatically trigger when progress completes</td>
        </tr>
        <tr>
          <td>showActivity</td>
          <td>true</td>
          <td>Whether progress should automatically show activity when incremented</td>
        </tr>
        <tr>
          <td>limitValues</td>
          <td>true</td>
          <td>When set to true, values that calculate to above 100% or below 0% will be adjusted. When set to false, inappropriate values will produce an error.</td>
        </tr>
        <tr>
          <td>label</td>
          <td>percent</td>
          <td>Can be set to either to display progress as <b>percent</b> or <b>ratio</b>. Matches up to corresponding text template with the same name.</td>
        </tr>
        <tr>
          <td>random</td>
          <td>
          <div class="code">
            className : {
              active  : 'active',
              error   : 'error',
              success : 'success',
              warning : 'warning'
            }
          </div>
          </td>
          <td>When incrementing without value, sets range for random increment value</td>
        </tr>
        <tr>
          <td>precision</td>
          <td>1</td>
          <td>Decimal point precision for calculated progress</td>
        </tr>
        <tr>
          <td>total</td>
          <td>false</td>
          <td>Setting a total value will make each call to increment get closer to this total (i.e. 1/20, 2/20 etc)</td>
        </tr>
        <tr>
          <td>value</td>
          <td>false</td>
          <td>Sets current value, when total is specified, this is used to calculate a ratio of the total, with percent this should be the overall percent</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
    <h4 class="ui header">Callbacks</h4>
    <p>Callbacks specify a function to occur after a specific behavior.</p>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th class="four wide"></th>
          <th class="four wide">Parameters</th>
          <th>Context</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onChange</td>
          <td>percent, value, total</td>
          <td>Progress</td>
          <td>Callback on percentage change</td>
        </tr>
        <tr>
          <td>onSuccess</td>
          <td>total</td>
          <td>Progress</td>
          <td>Callback on success state</td>
        </tr>
        <tr>
          <td>onActive</td>
          <td>value, total</td>
          <td>Progress</td>
          <td>Callback on active state</td>
        </tr>
        <tr>
          <td>onError</td>
          <td>value, total</td>
          <td>Progress</td>
          <td>Callback on error state</td>
        </tr>
        <tr>
          <td>onWarning</td>
          <td>value, total</td>
          <td>Progress</td>
          <td>Callback on warning state</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="six wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>progress</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>text</td>
          <td>
            <div class="code">
            text : {
              active  : false,
              error   : false,
              success : false,
              warning : false,
              percent : '{percent}%',
              ratio   : '{value} of {total}'
            }
            </div>
          </td>
          <td>Text content for each state, uses simple templating with {percent}, {value}, {total}</td>
        </tr>
        <tr>
          <td>regExp</td>
          <td>
            <div class="code">
            regExp: {
              variable: /\{\$*[A-z0-9]+\}/g
            }
            </div>
          </td>
          <td>Regular expressions used by module</td>
        </tr>
        <tr>
          <td>selector</td>
          <td>
            <div class="code">
            selector : {
              bar      : '> .bar',
              label    : '> .label',
              progress : '.bar > .progress'
            }
            </div>
          </td>
          <td>Selectors used by module</td>
        </tr>
        <tr>
          <td>metadata</td>
          <td>
            <div class="code">
            metadata: {
              percent : 'percent',
              total   : 'total',
              value   : 'value'
            }
            </div>
          </td>
          <td>DOM metadata used by module</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
            className : {
              active  : 'active',
              error   : 'error',
              success : 'success',
              warning : 'warning'
            }
            </div>
          </td>
          <td>Class names used to attach style to state</td>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal divider"><i class="icon setting"></i></div>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Progress</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>silent</td>
          <td>False</td>
          <td>Silences all console output including error messages, regardless of other debug settings.</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
            error    : {
              method     : 'The method you called is not defined.',
              nonNumeric : 'Progress value is non numeric'
            }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
